<template>
	<view class="wrapper">
		<view class="body">
			<view class="tips">根据交通运输部监管要求，您的资料尚未完善，同时请完善资料。</view>
			<view class="item">
				<view class="title">上传回单（一次最多10张）</view>
				<view>
					<robby-image-upload
						:value="imageData"
						v-model="imageData"
						:enable-del="true"
						:enable-add="true"
						:enable-drag="false"
						:form-data="formData"
						:header="header"
						:limit="10"
						:showUploadProgress="false"
						@delete="deleteImage"
						@add="addImage"
						:server-url-delete-image="serverUrlDeleteImage"
						:server-url="serverUrl"
					></robby-image-upload>
				</view>
			</view>
			<view class="item">
				<view class="title">请上传道路运输许可证</view>
				<view class="column-css" style="padding-top: 25rpx;text-align: center;">
					<image style="width: 340rpx;height: 230rpx;" mode="aspectFit" :src="receipt.rtc == '' ? modeimage : receipt.rtc" @tap="chooseImage(1)"></image>
				</view>
				<view>
					<view class="inputItem">
						<view class="text">
							道路运输证号
							<text style="color: #F36363;">*</text>
						</view>
						<input style="flex: 1;" type="number" v-model="receipt._rtcNo" placeholder="请上传道路运输证，系统自动识别" value="" />
					</view>
					<view class="inputItem">
						<view class="text">
							有效期至
							<text style="color: #F36363;">*</text>
						</view>
						<view style="flex: 1;">
							<picker mode="date" :value="receipt.rtcDate" @change="bindDateChange">
								<view :style="{ color: receipt.rtcDate == '请选择' ? '#999999' : '#333333' }">{{receipt.rtcDate}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="title">请上传从业资格证</view>
				<view class="column-css" style="padding-top: 25rpx;text-align: center;">
					<image style="width: 340rpx;height: 230rpx;" mode="aspectFit" :src="receipt.tqc == '' ? modeimage : receipt.tqc" @tap="chooseImage(2)"></image>
				</view>
			</view>
		</view>
		<view class="btn">
			<view @click="shake">提交</view>
		</view>
		
		<uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,0.8)">
			<view class="popup-wrap">
				<view class="popup-describe">
					<image v-if="index == 1" src="../../static/icon_example_road.png" mode="aspectFit"></image>
					<image v-if="index == 2" src="../../static/icon_example_bus.png" mode="aspectFit"></image>
					<view>
						<view class="title">{{title}}</view>
						<view class="desc">
							<view>保证证件四角可见，无遮挡，无反光；</view>
							<view>{{desc}}</view>
						</view>
					</view>
				</view>
				<view class="popup-box">
					<view @click="onCamera(0)">拍照</view>
					<view @click="onCamera(1)">从相册选择</view>
				</view>
				<view class="popup-cancel" @click="onCancel">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue';
	export default {
		data() {
			return {
				modeimage: '../../static/icon_carmer.png',
				imageData: [],
				imageurl: [],
				serverUrl: this.API + '/driverService/upload',
				serverUrlDeleteImage: '',
				formData: {
					fileType: '8',
					phoneNumber: uni.getStorageSync(this.DATA_KEY.userInfo).phoneNumber,
					fileId: Math.floor(Math.random() * 1259),
					ocrOrNot: '0',
					// orderId: this.billNo
				},
				header: {
					'Content-Type': 'multipart/form-data;boundary=ebf9f03029db4c2799ae16b5428b06bds',
					token: uni.getStorageSync(this.DATA_KEY.token)
				},
				receipt: {
					rtc: '',
					tqc: '',
					rtcNo: '',
					_rtcNo: '',
					rtcDate: '请选择'
				},
				index: null,
				title: '',
				desc: '',
				timer: null,
			}
		},
		onLoad() {
			
		},
		methods: {
			shake() {
				console.log(this.timer)
			    if (this.timer) {
					return
			    }
				this.submit()
			    this.timer = setTimeout(() => {
					console.log(888888)
			    }, 3000)
			},
			submit() {
				console.log('1111111')
				console.log(this.imageData)
			},
			bindDateChange(e) {
				console.log(e.detail.value)
				this.receipt.rtcDate = e.detail.value
			},
			deleteImage: function(e) {
				this.imageurl = e.allImages;
			},
			addImage: function(e) {
				this.imageurl = e.allImages;
			},
			onCancel(){
				this.$refs.popup.close()
			},
			chooseImage(index) {
				console.log(index)
				this.index = index
				this.$refs.popup.open()
				if(this.index == 1) {
					this.title = '请上传道路运输许可证照片'
					this.desc = '姓名、身份照号码等信息清晰，无涂改'
				} else {
					this.title = '请上传本人从业资格证照片'
					this.desc = '发证机关、有效期等信息清晰，无涂改'
				} 
			},
			onCamera(num) {
				let sourceType
				num === 0 ? sourceType = ['camera'] : sourceType = ['album'] 
				let index = this.index
				this.$refs.popup.close()
				uni.chooseImage({
					count: 1,
					sourceType: sourceType,
					sizeType: 'compressed',
					success: res => {
						console.log('ddd======1------------>', res.tempFiles);
						console.log('ddd======2------------>', res.tempFiles[0]);
						console.log('ddd======3------------>', res.tempFiles[0].size);
						let resSize = res.tempFiles[0].size;
						if (resSize > 10485760) {
							uni.showToast({
								title: '上传的图片大小不超过10M,请重新上传！',
								icon: 'none',
								duration: 2000,
								mask: true
							});
							return;
						}
						uni.showLoading({
							title: '上传中'
						});
						if (index == 1) {
							uni.uploadFile({
								url: `${this.API}/driverService/uploadRtc`,
								fileType: 'image',
								name: 'file',
								filePath: res.tempFilePaths[0],
								file: res.tempFiles,
								header: {
									'Content-Type': 'multipart/form-data;boundary=ebf9f03029db4c2799ae16b5428b06bds',
									Authorization: uni.getStorageSync(this.DATA_KEY.token)
								},
								formData: {
									fileType: '2',
									// mobile: this.userInfo.mobile,
									mobile: uni.getStorageSync(this.DATA_KEY.userInfo).mobile,
									fileId: Math.floor(Math.random() * 1259),
									ocrOrNot: '1',
									orderId: ''
								},
								success: res => {
									uni.hideLoading();
									if (JSON.parse(res.data).code == 0) {
										this.receipt.rtc = JSON.parse(res.data).data.imgurl;
										this.receipt._rtcNo = JSON.parse(res.data).data.rtcNo;
										this.receipt.rtcNo = JSON.parse(res.data).data.rtcNo;
									} else {
										uni.showToast({
											title: JSON.parse(res.data).msg,
											icon: 'none'
										});
									}
								},
								fail: error => {
									uni.showToast({
										title: '文件上传失败',
										icon: 'none'
									});
								}
							});
						} else if (index == 2) {
							uni.uploadFile({
								url: `${this.API}/driverService/upload`,
								fileType: 'image',
								name: 'file',
								filePath: res.tempFilePaths[0],
								file: res.tempFiles,
								header: {
									'Content-Type': 'multipart/form-data;boundary=ebf9f03029db4c2799ae16b5428b06bds',
									Authorization: uni.getStorageSync(this.DATA_KEY.token)
								},
								formData: {
									fileType: '3',
									// mobile: this.userInfo.mobile,
									mobile: uni.getStorageSync(this.DATA_KEY.userInfo).mobile,
									fileId: Math.floor(Math.random() * 1259),
									ocrOrNot: '1',
									orderId: ''
								},
								success: res => {
									console.log('从业资格证: ', JSON.parse(res.data));
									uni.hideLoading();
									if (JSON.parse(res.data).code == 0) {
										this.receipt.tqc = JSON.parse(res.data).data;
									} else {
										uni.showToast({
											title: JSON.parse(res.data).msg,
											icon: 'none'
										});
									}
								},
								fail: error => {
									uni.showToast({
										title: '文件上传失败',
										icon: 'none'
									});
								}
							});
						} 
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
		},
		components: {
			robbyImageUpload,
		},
	}
</script>

<style lang="scss">
	.popup-wrap{
		// padding: 0 24rpx calc(24rpx + env(safe-area-inset-bottom));
		padding: 0 24rpx calc(24rpx);
		color: #007aff;
		text-align: center;
		background: transparent;
		.popup-describe{
			color: #fff;
			position: absolute;
			top: -55vh;
			left: 50%;
			transform: translate(-50%, 0);
			.title{
				margin: 24rpx 0;
				font-size: 36rpx;
			}
			.desc{
				font-size: 24rpx;
			}
		}
		.popup-box{
			background: #fff;
			margin-bottom: 24rpx;
			border-radius: 8rpx;
			view{
				padding: 24rpx 0;
				&:first-child{
					border-bottom: 1rpx solid #f9f9f9;
				}
			}
		}
		.popup-cancel{
			background: #fff;
			padding: 24rpx 0;
			border-radius: 8rpx;
		}
	}
	.wrapper {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		padding-bottom: calc(90rpx + env(safe-area-inset-bottom));
		width: 100vw;
		height: 100vh;
		.imageItem{
			width: 208rpx !important;
			height: 208rpx !important;
			margin: 10rpx;
			.moveImage{
				width: 208rpx !important;
				height: 208rpx !important;
			}
		}

		.body {
			width: 100%;
			height: 100%;
			overflow: auto;
			background: #f9f9f9;

			.tips {
				font-size: 24rpx;
				color: #fff;
				background: red;
				padding: 10rpx 24rpx;
			}

			.item {
				margin-bottom: 24rpx;
				background: #fff;
				padding: 24rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.title {
					font-size: 30rpx;
					font-weight: 500;
					color: #333;
				}
				.inputItem{
					display: flex;
					padding: 24rpx 0;
					margin-top: 12rpx;
					&:first-child{
						border-bottom: 1rpx solid #f9f9f9;
					}
					.text{
						width: 40%;
						font-size: 30rpx;
						color: #666;
					}
				}
			}
		}

		.btn {
			position: absolute;
			left: 0;
			bottom: calc(12rpx + env(safe-area-inset-bottom));
			width: 100%;
			box-sizing: border-box;
			padding: 0 24rpx;

			view {
				padding: 20rpx;
				text-align: center;
				color: #FFFFFF;
				background: #2B7CFF;
				border-radius: 4rpx;
			}
		}
	}
</style>
